<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>NPMap Tests</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="author" content="The NPMap Team">
    <meta name="description" content="Tests for the NPMap library.">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="http://www.nps.gov/npmap/libs/bootstrap/2.1.1/css/bootstrap.css" rel="stylesheet">
    <link href="http://www.nps.gov/npmap/libs/bootstrap/2.1.1/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="js/lib/jasmine-1.2.0/jasmine.css" rel="stylesheet">
    <style type="text/css">
      html, body, .container-fluid, .row-fluid {
        height: 100%;
      }
      body {
        background: #f9f7f1 url(img/sub_bg.png) no-repeat left bottom;
        margin: 0;
        padding: 0;
        width: 100%;
      }
      a {
        color: #b28000;
        text-decoration: none;
      }
      a:hover {
        color: #d39700;
        text-decoration: underline;
      }
      .nav-header {
        text-transform: none;
      }
      .symbolSummary li {
        line-height: inherit;
      }
    </style>
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="http://www.nps.gov/npmap/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.nps.gov/npmap/apple-touch-icon-144x144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.nps.gov/npmap/apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.nps.gov/npmap/apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="http://www.nps.gov/npmap/apple-touch-icon-57x57-precomposed.png">
  </head>
  <body>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3" style="padding-top:20px;">
          <h1>NPMap Tests</h1>
            <p>NPMap uses <a href="http://pivotal.github.com/jasmine/">Jasmine</a>, a "behavior-driven development framework for testing JavaScript code."</p>
            <p>Tests are still a work-in-progress. Running these tests is a good way to check if a Base API supports a particular feature or layer handler.</p>
            <form style="margin-left:10%;width:80%;">
              <label for="selectBaseApi">Base API</label>
              <select id="selectBaseApi" style="width:100%;" onchange="changeTest(this);return false;">
                <option>Bing</option>
                <option>Esri</option>
                <option>Google</option>
                <option>Leaflet</option>
                <option>ModestMaps</option>
              </select>
              <label class="control-label" for="selectModule">Module</label>
              <select id="selectModule" style="width:100%;" onchange="changeTest(this);return false;">
                <option>NPMap.Event</option>
                <option>NPMap.Layer</option>
                <option>NPMap.Map</option>
                <option>NPMap.Util</option>
              </select>
            </form>
        </div>
        <div class="span9" style="background-color:white;height:100%;">
          <div style="border-left:1px solid #e3e3e3;border-right:1px solid #e3e3e3;height:100%;position:relative;width:100%;">
            <div id="map" style="height:300px;left:0;overflow:none;position:absolute;right:0;top:0;">
            </div>
            <div id="jasmine" style="bottom:0;left:0;overflow:auto;position:absolute;right:0;top:300px;">
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="js/lib/jasmine-1.2.0/jasmine.js"></script>
    <script src="js/lib/jasmine-1.2.0/jasmine-html.js"></script>
    <script src="js/spec/helpers.js"></script>
    <script>
      var activeModule = null,
          baseApi = null,
          NPMap = {},
          params = window.location.search.substring(1).split('&');

      function changeTest(el) {
        var url = '?baseapi=';

        if (el.id === 'selectBaseApi') {
          url += el.value;
        } else {
          url += baseApi;
        }

        url += '&module=';

        if (el.id === 'selectBaseApi') {
          url += activeModule;
        } else {
          url += el.value;
        }

        document.location = window.location.origin + window.location.pathname + url.toLowerCase();
      }

      for (var i = 0; i < params.length; i++) {
        var param = params[i];

        if (param.indexOf('baseapi=') !== -1) {
          baseApi = param.replace('baseapi=', '');
        } else if (param.indexOf('module=') !== -1) {
          activeModule = param.replace('module=', '');
        }
      }

      if (!activeModule) {
        activeModule = 'NPMap.Map';
      } else {
        var cls = activeModule.split('.')[1];

        activeModule = 'NPMap.' + cls.charAt(0).toUpperCase() + cls.slice(1);
      }

      if (!baseApi) {
        baseApi = 'bing';
      }

      document.getElementById('selectBaseApi').value = baseApi === 'modestmaps' ? 'ModestMaps' : baseApi.charAt(0).toUpperCase() + baseApi.slice(1);
      document.getElementById('selectModule').value = activeModule;
    
      (function() {
        var s = document.createElement('script');
        s.src = 'js/spec/' + activeModule.toLowerCase() + '.js';
        document.body.appendChild(s);
      })();

      NPMap.config = {
        api: baseApi,
        div: 'map',
        events: {
          init: function(callback) {
            var currentWindowOnload = window.onload,
                htmlReporter = new jasmine.HtmlReporter(document.getElementById('jasmine')),
                jasmineEnv = jasmine.getEnv();

            jasmineEnv.addReporter(htmlReporter);
            jasmineEnv.specFilter = function(spec) {
              return htmlReporter.specFilter(spec);
            };
            jasmineEnv.updateInterval = 1000;

            callback();
            jasmineEnv.execute();
          }
        }
      };
      
      (function() {
        var s = document.createElement('script');
        s.src = 'http://www.nps.gov/npmap/1.0.0/bootstrap.js';
        document.body.appendChild(s);
      })();
    </script>
  </body>
</html>